<template>
  <div>首页</div>
</template>

<script setup lang="ts">
import { microApps } from '@/qiankun/micro'
import { useStore } from 'vuex'
import { computed, onMounted, nextTick } from 'vue'
import { registerMicroApps, start } from 'qiankun';

const store = useStore()
onMounted(() => {
  nextTick(() => {
    registerMicroApps(microApps, {
      beforeLoad: (app) => {
        console.log('beforeLoad ===>', app.name)
        return Promise.resolve()
      },
      beforeMount: app => {
        console.log('beforeMount ===> ', app.name)
        return Promise.resolve()
      },
      afterMount: app => {
        console.log('afterMount ===> ', app.name)
        return Promise.resolve()
      },
      beforeUnmount: app => {
        console.log('beforeUnmount ===> ', app.name)
        return Promise.resolve()
      },
      afterUnmount: app => {
        console.log('afterUnmount ===> ', app.name)
        return Promise.resolve()
      }
    })

    // /**
    //  * Step3 设置默认进入的子应用
    //  */
    // setDefaultMountApp('/h5-edit/echart')
    start()
  })
})
// 展开
const unFold = () => {
  store.commit('setCommonStore', {
    collapsed: false
  })
}
// 折叠
const fold = () => {
  store.commit('setCommonStore', {
    collapsed: true
  })
}

const keepAliveList = computed(() => {
  return store.state.common.includesRouters
})
</script>

<style lang="less" scoped>
.left-logo {
  height: 60px;
  background: #ffffff;
  color: @theme-bac-color;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 1000;
  .logo-img {
    height: 50px;
  }
}
</style>